﻿<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>版本对比</title>
    <link href="../../Scripts/layui/layui/css/layui.css" rel="stylesheet" />
    <link href="../../Scripts/layui/style/admin.css" rel="stylesheet" />
    <script language="JavaScript" src="../../Comm/JScript.js" type="text/javascript"></script>
    <script type="text/javascript" src="../../Scripts/bootstrap/js/jquery.min.js"></script>
    <script src="../../Scripts/QueryString.js" type="text/javascript"></script>
    <!-- 引用通用的js文件. -->
    <script type="text/javascript" src="../../Scripts/config.js"></script>
    <script type="text/javascript" src="../../Comm/Gener.js"></script>
    <script src="../../Scripts/layui/layui/layui.js" type="text/javascript"></script>
    <script src="../../Scripts/layui/LayuiDialog.js" type="text/javascript"></script>
    <script src="./DBVer.js" type="text/javascript"></script>
    <script src="htmldiff.js"></script>
    <script src="../../Scripts/decimal.js" type="text/javascript"></script>
    <script src="../../Scripts/cnnum.js" type="text/javascript"></script>
    <style type="text/css">
        .border_1 {
            border: 1px solid #ccc;
            height: 96vh;
        }

        .padding-5 {
            padding: 10px;
        }

        .layui-right {
            width: 120px;
            height: 100%;
            text-align: center;
            position: absolute;
            right: 10px;
            top: 0;
        }

            .layui-right a {
                display: block;
                height: 100%;
                width: 100%;
            }

        .layui-left {
            width: 60px;
            height: 100%;
            text-align: center;
            position: absolute;
            left: 20px;
            top: 0;
        }

            .layui-left a {
                display: block;
                height: 100%;
                width: 100%;
            }

        .tree-txt-active {
            background: #dcdcdc;
        }

        .layui-card-body {
            height: 80vh;
            overflow-y: auto;
        }

        .layui-tree-entry .layui-tree-txt {
            font-weight: 600;
        }

        .layui-tree-pack .layui-tree-txt {
            font-weight: 300;
        }

        .layui-tab-title {
            text-align: center
        }

        #toIframe {
            display: none;
            width: 100%;
            border: none;
            height: 96vh;
        }

        .layui-tab-content {
            padding: 0;
        }

        .layui-tab {
            margin: 0;
        }

        .h-100 {
            height: 96vh;
            overflow: auto;
        }

        #docs {
            height: 96vh;
            overflow: auto;
        }

        .layui-card {
            height: auto;
        }

        .layui-card-body {
            height: auto
        }

        .labelTitle {
            height: 40px;
            text-align: center;
            padding-right: 28px;
            line-height: 40px;
            background: #fff;
            font-size: 18px;
            font-weight: bold;
            width: 90%;
        }

        .layui-card-header {
            display: block ruby;
        }

        .hearder {
            height: 42px;
            line-height: 42px;
            padding: 0 15px;
            border-bottom: 1px solid #c5c2c2;
            color: #333;
            border-radius: 2px 2px 0 0;
            font-size: 14px;
            text-align: center;
            background-color: white;
        }

        .layui-col-sm8 layui-col-md8 layui-col-xs8 {
            width: 72% !important;
        }

        .layui-col-sm4 layui-col-md4 layui-col-xs4 {
            width: 28% !important;
        }

        .diff {
            background-color: yellow;
        }

        .diffmod {
            background-color: yellow;
        }

        ::-webkit-scrollbar-thumb {
            border-radius: 10px;
            -webkit-box-shadow: inset 0 0 6px #999;
            background-color: #999;
        }

        ::-webkit-scrollbar-track {
            -webkit-box-shadow: inset 0 0 6px #ddd;
            border-radius: 10px;
            background-color: #F5F5F5;
        }

        ::-webkit-scrollbar {
            width: 4px;
            height: 0px;
            background-color: #F5F5F5;
        }
    </style>
    <script type="text/javascript">
        var frmID = GetQueryString("FrmID");
        var oid = GetQueryString("WorkID");
        if (oid == null)
            oid = GetQueryString("OID");
        var mainArr = [];
        var compareArr = [];
        var group = [];
        var key = "";
        var name = "";
        var mainVer = GetQueryString("MainVer");
        var compareVer = GetQueryString("CompareVer");
        var mainMyPK = "";
        var compareMyPK = "";
        //获取浏览器页面可见高度和宽度
        var _PageHeight = document.documentElement.clientHeight,
            _PageWidth = document.documentElement.clientWidth;
        //计算loading框距离顶部和左部的距离（loading框的宽度为215px，高度为61px）
        var _LoadingTop = _PageHeight > 61 ? (_PageHeight - 61) / 2 : 0,
            _LoadingLeft = _PageWidth > 215 ? (_PageWidth - 215) / 2 : 0;
        //在页面未加载完毕之前显示的loading Html自定义内容
        var _LoadingHtml = '<div id="loadingDiv" style="position:absolute;left:0;width:100%;height:' + _PageHeight + 'px;top:0;background:#f3f8ff;opacity:0.8;filter:alpha(opacity=80);z-index:10000;"><div class="layui-layer-loading"style="position: absolute; cursor1: wait; left: ' + _LoadingLeft + 'px; top:' + _LoadingTop + 'px; width: auto; height: 57px; line-height: 57px; padding-left: 50px; padding-right: 5px;"><div class="layui-layer-content layui-layer-loading0"></div></div></div>';
        //呈现loading效果
        document.write(_LoadingHtml);

        //监听加载状态改变
        document.onreadystatechange = completeLoading;
        //加载状态为complete时移除loading效果
        function completeLoading() {
            if (document.readyState == "complete") {
                var loadingMask = document.getElementById('loadingDiv');
                loadingMask.parentNode.removeChild(loadingMask);
            }
        }
        $(function () {

            var handler = new HttpHandler("BP.WF.HttpHandler.WF_CCForm_ChapterFrmDB");
            handler.AddUrlData();
            var data = handler.DoMethodReturnString("ChapterFrmDB_Init");
            if (data.indexOf("err@") != -1) {
                layer.alert(data.replace("err@", ""));
                return;
            }
            data = JSON.parse(data);
            var groupFields = data["GroupFields"];//章.
            var attrs = data["MapAttrs"];//节.
            var vers = data["MapDtl_Ver"];
            var mainVers = data["MainVers"];
            var compareVers = data["CompareVers"];
            var temp = $.grep(mainVers, function (ver) {
                return ver.KeyOfEn == null || ver.KeyOfEn == "" || ver.KeyOfEn == undefined
            })[0];
            mainMyPK = temp.MyPK;
            var temp = $.grep(compareVers, function (ver) {
                return ver.KeyOfEn == null || ver.KeyOfEn == "" || ver.KeyOfEn == undefined
            })[0];
            compareMyPK = temp.MyPK;
            var mapData = data["Sys_MapData"][0];
            $("#mainHeader").html(mapData.Name + "V" + mainVer + ".0");
            $("#compareHeader").html(mapData.Name + "V" + compareVer + ".0");
            layui.use(['tree'], function () {
                var tree = layui.tree;
                //形成数据.
                for (var i = 0; i < groupFields.length; i++) {
                    var gf = groupFields[i];

                    gf.children = [];
                    var list = {
                        title: gf.Lab,
                        id: gf.FrmID,
                        field: gf.Lab,
                        spread: true,
                        children: gf.children,
                        checked: false,
                        ...gf
                    }
                    for (var idx = 0; idx < attrs.length; idx++) {
                        var attr = attrs[idx];
                        var clist = {
                            title: attr.Name,
                            id: attr.KeyOfEn,
                            field: attr.Name,
                            checked: false,
                            pName: gf.Lab,
                            ...attr
                        }

                        if (clist.GroupID == list.OID) {
                            list.children.push(clist)
                        }

                    }
                    if (gf.CtrlType == "") {
                        if (list.children.length != 0)
                            group.push(list);
                    } else {
                        group.push(list);
                    }
                    //group.push(list);

                }

                //版本1的展示
                tree.render({
                    elem: '#mainTree'
                    , data: group,
                    click: function (obj) {
                        TreeClick(obj, mainMyPK, compareMyPK);
                    }
                });

                //版本2
                tree.render({
                    elem: '#compareTree'
                    , data: group,
                    click: function (obj) {
                        TreeClick(obj, mainMyPK, compareMyPK);

                    }
                });

                treeSet("main", attrs, mainVer, mainMyPK);
                //treeSet("compare", attrs, compareVer, compareMyPK);
            });


            //滚动条事件
            var isMainScroll = false;
            var isCompareScroll = false;
            $("#mainDoc").parent().parent().bind("scroll", function () {
                if (isCompareScroll == true) {
                    isCompareScroll = false;
                    return;
                }

                isMainScroll = true;
                if (isCompareScroll == false) {
                    var top = $(this).scrollTop();
                    $("#compareDoc").parent().parent().scrollTop(top);

                }

            });

            $("#compareDoc").parent().parent().bind("scroll", function () {
                if (isMainScroll == true) {
                    isMainScroll = false;
                    return;
                }

                isCompareScroll = true;
                if (isMainScroll == false) {
                    var top = $(this).scrollTop();
                    $("#mainDoc").parent().parent().scrollTop(top);

                }

            });

        });


        /**
         * 单击其中一个版本章节，比对版本应该也需要展示
         * @param type
         */
        function TreeClick(obj, mainMyPK, compareMyPK) {
            if (!obj.data.children) {
                //主版本
                $('#mainTree .layui-tree-set').removeClass("tree-txt-active");
                $(obj.elem[0]).addClass("tree-txt-active");

                //比对版本
                if (key != obj.data.KeyOfEn) {
                    name = obj.data.Name;
                    key = obj.data.KeyOfEn;
                    RichTextFun("main", name);
                    RichTextFun("compare", name);
                    //处理主版本的信息
                    AddNoDuplicateElements(key, GetPara(obj.data.AtPara, "MainStr"), GetPara(obj.data.AtPara, "CompareStr"), "main");
                    //处理比对版本的信息
                    AddNoDuplicateElements(key, GetPara(obj.data.AtPara, "CompareStr"), GetPara(obj.data.AtPara, "MainStr"), "compare");
                }

            } else {
                $("#compareTitle").parent().hide();
                $("#mainTitle").parent().hide();
                key = obj.data.CtrlID;
                //如果点击章.
                if (obj.data.CtrlType == "") {
                    return;
                }
                if (obj.data.CtrlType == "Dtl") {
                    TableFun("Dtl");
                    ChapterFrmDB_Dtl(obj.data.CtrlID, mainMyPK, compareMyPK);
                    return;
                }
                if (obj.data.CtrlType == "Ath") {
                    TableFun("Ath");
                    ChapterFrmDB_Ath(obj.data.CtrlID, mainMyPK, compareMyPK);
                    return;
                }
                if (obj.data.CtrlType == "ChapterFrmLinkFrm") {
                    ChapterFrmDB_FrmLink(obj.data.CtrlID, oid, mainVer, compareVer);
                    return;
                }
                if (obj.data.CtrlType == "ChapterFrmSelfUrl") {
                    var url = "";
                    if (obj.data.CtrlType == "ChapterFrmSelfUrl") {
                        if (obj.data.CtrlID.indexOf('http') == 0)
                            url = obj.data.CtrlID + "&OID=" + oid + "&FK_MapData=" + frmID + "&FK_Node=" + GetQueryString("FK_Node") + "&IsReadonly=1";
                        else
                            url = basePath + "" + obj.data.CtrlID + "&OID=" + oid + "&FK_MapData=" + frmID + "&FK_Node=" + GetQueryString("FK_Node") + "&IsReadonly=1";

                    }
                    iframeFun(url + "&DBVer=" + mainVer, "main");
                    iframeFun(url + "&DBVer=" + compareVer, "compare");
                    return;
                }
                layer.alert(group[index].CtrlID + "还有解析");
            }
        }
        function AddNoDuplicateElements(key, val, compareVal, elementID) {
            if (val.indexOf("../../DataUser/UploadFile") != -1)
                val = replaceAll(val, "../../DataUser/UploadFile", "../../../DataUser/UploadFile");
            if (compareVal.indexOf("../../DataUser/UploadFile") != -1)
                compareVal = replaceAll(compareVal, "../../DataUser/UploadFile", "../../../DataUser/UploadFile");
            var aphtml = `<div class="itemlist" id="${elementID}ele_${key}">
                                                                                                        <div id="${elementID}title_${key}"></div>
                                                                                                        <div><h4 id="n_${elementID}${key}"></h4></div>
                                                                                                        </div>`
            var arr = []
            arr.push(key);
            if (elementID == "main") {
                for (var i = 0; i < arr.length; i++) {
                    if (mainArr.indexOf(arr[i]) === -1) {
                        mainArr.push(arr[i]);
                        $("#" + elementID + "Doc").append(aphtml);
                        $("#" + elementID + "ele_" + key).html(getHTMLDiff(val, compareVal));
                    }
                }
            }
            if (elementID == "compare") {
                for (var i = 0; i < arr.length; i++) {
                    if (compareArr.indexOf(arr[i]) === -1) {
                        compareArr.push(arr[i]);
                        $("#" + elementID + "Doc").append(aphtml);
                        $("#" + elementID + "ele_" + key).html(getHTMLDiff(val, compareVal));
                    }
                }
            }

            $("#" + elementID + "Doc .itemlist").hide();
            $("#" + elementID + "ele_" + key).show();
            addtitle(key, elementID);
        }
        // 判断第一项是否有子集 并选中状态 跳转iframe页面
        function treeSet(type, attrs, ver, verPK) {
            var elementID = "#mainTree";
            var treelist = document.querySelectorAll(elementID + ' .layui-tree-pack >.layui-tree-set');
            var Tree_set = document.querySelectorAll(elementID + ' .layui-tree>.layui-tree-set');
            Tree_set.forEach((item, index) => {
                var main = $(item).find('.layui-tree-pack ');
                //替换 tree icon
                if (item.childNodes.length == 1) {
                    var sclass = $(item).find('.layui-tree-iconClick');
                    $(sclass).empty();
                    if (group[index].CtrlType == "Dtl") {
                        let i = `<i class="icon-notebook"></i>`
                        $(sclass).html(i);
                    }

                    if (group[index].CtrlType == "Ath") {
                        let i = `<i class="icon-paper-clip"></i>`
                        $(sclass).html(i);
                    }

                    if (group[index].CtrlType == "ChapterFrmLinkFrm") {
                        let i = `<i class="icon-folder"></i>`
                        $(sclass).html(i);
                    }

                    if (group[index].CtrlType == "ChapterFrmSelfUrl") {
                        let i = `<i class="icon-folder"></i>`
                        $(sclass).html(i);
                    }
                }
                //默认第一个选中
                if (index == 0) {
                    if (main.length == 0) {
                        $(elementID + '.layui-tree-set').removeClass("tree-txt-active");
                        $(item).addClass("tree-txt-active");
                        if (group[index].CtrlType == '') {
                            return;
                        }
                        key = group[index].CtrlID;
                        var url = '';
                        //如果点击章.
                        if (group[index].CtrlType == "Dtl") {
                            TableFun("Dtl");
                            ChapterFrmDB_Dtl(group[index].CtrlID, mainMyPK, compareMyPK);
                            return;
                        }
                        if (group[index].CtrlType == "Ath") {
                            TableFun("Ath");
                            ChapterFrmDB_Ath(group[index].CtrlID, mainMyPK, compareMyPK);
                            return;
                        }

                        if (group[index].CtrlType == "ChapterFrmLinkFrm") {
                            ChapterFrmDB_FrmLink(group[index].CtrlID, oid, mainVer, compareVer);
                            return;
                        }

                        if (group[index].CtrlType == "ChapterFrmSelfUrl") {
                            if (group[index].CtrlID.indexOf('http') == 0)
                                url = group[index].CtrlID + "&OID=" + oid + "&FK_MapData=" + frmID + "&FK_Node=" + GetQueryString("FK_Node");
                            else
                                url = basePath + "" + group[index].CtrlID + "&OID=" + oid + "&FK_MapData=" + frmID + "&FK_Node=" + GetQueryString("FK_Node");
                            iframeFun(url + "&DBVer=" + mainVer, "main");
                            iframeFun(url + "&DBVer=" + compareVer, "compare");
                            return;
                        }
                        layer.alert(group[index].CtrlID + "还有解析");

                    } else {
                        item.checked = true;
                        item.children[index].checked = true;
                        var key = treelist[0].dataset.id;
                        var mapAttr = $.grep(attrs, function (attr) {
                            return attr.KeyOfEn == key;
                        })[0];

                        key = key;
                        name = mapAttr.Name;
                        $("#mainTitle").html(name)
                        $("#compareTitle").html(name);

                        AddNoDuplicateElements(key, GetPara(mapAttr.AtPara, "MainStr"), GetPara(mapAttr.AtPara, "CompareStr"), "main");
                        AddNoDuplicateElements(key, GetPara(mapAttr.AtPara, "CompareStr"), GetPara(mapAttr.AtPara, "MainStr"), "compare");

                    }
                }
            })

        }
        /**
         * 富文本的显示
         * @param type
         * @param name
         */
        function RichTextFun(type, name) {
            $("#" + type + "Title").html(name);
            $("#" + type + "Title").parent().show();
            $("#" + type + "Text").show();
            $("#" + type + "Frame").hide();
            $("#" + type + "Table").hide()
            $("#" + type + "HeJi").hide();
            $("div[lay-id='" + type + "Table']").hide();
            $("#compareDiv").css("height", "auto");
        }
        /**
         * IFrame的显示
         * @param url
         * @param type
         */
        function iframeFun(url, type) {
            $("#" + type + "Title").parent().hide();
            $("#" + type + "Frame").show();
            $("#" + type + "Frame").attr("src", url);
            $("#" + type + "Text").hide();
            $("#" + type + "Table").hide();
            $("#" + type + "HeJi").hide();
            $("div[lay-id='" + type + "Table']").hide();
            $("#compareDiv").css("height", "auto");
        }
        /**
         * 显示表格数据
         * @param type
         */
        function TableFun(type) {
            $("#mainTitle").parent().hide();
            $("#mainFrame").hide();
            $("#mainText").hide();
            $("#mainTable").show();
            if (type == "Dtl") {
                $("#mainHeJi").show();
                $("#compareHeJi").show();
            } else {
                $("#mainHeJi").hide();
                $("#compareHeJi").hide();
            }
            $("#compareTitle").parent().hide();
            $("#compareFrame").hide();
            $("#compareText").hide();
            $("#compareTable").show();
            $("#compareDiv").css("height", "calc(100vh - 92px)");
        }

        //添加title名
        function addtitle(key, type) {
            group.forEach((item, index) => {
                if (item.children.length > 0) {
                    item.children.forEach(ite => {
                        if (ite.id == key) {
                            name = ite.Name;
                            $("#" + type + "Title").html(name)

                        }
                    })
                }
            });
        }
    </script>
</head>
<body>
    <div class="layui-fluid">
        <div class="layui-row">
            <!--版本1的显示-->
            <div class="layui-col-sm7 layui-col-md7  layui-col-xs7 " style="border: 1px solid #b3adad;">
                <h5 id="mainHeader" class="hearder">V1.0</h5>
                <div class="layui-col-sm4 layui-col-md4 layui-col-xs4" style="width: 28% !important;">
                    <div class="layui-tab layui-tab-brief" lay-filter="docTabBrief">
                        <div class="layui-tab-content">
                            <div class="layui-tab-item layui-show">
                                <div id="mainTree" class="demo-tree demo-tree-box" style="height: calc(100vh - 92px); overflow-x: auto; border-right: 1px solid #c5c2c2;"></div>
                            </div>
                        </div>

                    </div>
                </div>
                <div class="layui-col-sm8 layui-col-md8 layui-col-xs8" style="overflow-y: hidden; width: 72% !important;">
                    <div class="layui-card">
                        <div class="layui-card-header">
                            <div class="labelTitle" id="mainTitle"></div>
                        </div>
                        <div class="layui-card-body">
                            <div class="layui-form" id="mainText">
                                <div id="mainDoc" style="height: calc(100vh - 150px)"></div>
                            </div>
                            <div class="layui-form">
                                <table class="layui-table" id="mainTable"></table>
                                <div class="layui-text" style="text-align:left;margin-top:5px;" id="mainHeJi"></div>
                            </div>
                            <div class="layui-form">
                                <iframe id="mainFrame" frameborder="0" style="width: 100%; height: calc(100vh - 90px); " scroll=no></iframe>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--版本2的显示-->
            <div class="layui-col-sm5 layui-col-md5  layui-col-xs5" style="border: 1px solid #b3adad;">
                <h5 id="compareHeader" class="hearder">V1.0</h5>
                <!--<div class="layui-col-sm3 layui-col-md3 layui-col-xs3">
                    <div class="layui-tab layui-tab-brief" lay-filter="docTabBrief">
                        <div class="layui-tab-content">
                            <div class="layui-tab-item layui-show">
                                <div id="compareTree" class="demo-tree demo-tree-box" style="height: calc(100vh - 72px); overflow-x: auto; border-right:1px solid #c5c2c2 "></div>
                            </div>
                        </div>

                    </div>
                </div>-->
                <div class="layui-col-sm12 layui-col-md12 layui-col-xs12" style="overflow-y: hidden;" id="compareDiv">
                    <div class="layui-card">
                        <div class="layui-card-header">
                            <div class="labelTitle" id="compareTitle"></div>
                        </div>
                        <div class="layui-card-body">
                            <div class="layui-form" id="compareText">
                                <div id="compareDoc" style="height: calc(100vh - 150px)"></div>
                            </div>
                            <div class="layui-form">
                                <table class="layui-table" id="compareTable"></table>
                                <div class="layui-text" style="text-align:left;margin-top:5px;" id="compareHeJi"></div>
                            </div>
                            <div class="layui-form">
                                <iframe id="compareFrame" frameborder="0" style="width: 100%; height: calc(100vh - 90px); " scroll=no></iframe>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
